﻿<html>
<head>
    <title>XSockets - WeAreTheRealTimeWeb</title>
    <!-- JQUERY JS //-->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/jquery-ui.min.js" type="text/javascript"></script>
    <!-- WIJMO CSS //-->
    <link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet"
        type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-open.1.4.0.css" rel="stylesheet" type="text/css" />
    <link href="http://cdn.wijmo.com/jquery.wijmo-complete.1.4.0.css" rel="stylesheet"
        type="text/css" />
    <!-- WIJMO JS //-->
    <script src="http://cdn.wijmo.com/external/jquery.bgiframe-2.1.3-pre.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.glob.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/jquery.mousewheel.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/external/raphael.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.1.4.0.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-complete.1.4.0.min.js" type="text/javascript"></script>
    <!-- JSON2 JS //-->
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <!-- JXSOCKETS JS //-->    
    <script src="/Scripts/JXSockets-1.0.4.beta.js" type="text/javascript"></script> 
    <style type="text/css">
        body
        {
            font: 75.5% "Trebuchet MS" , sans-serif;
            margin: 5px;
        }
        #wijpiechart
        {
            width: 320px;
            height: 230px;
        }
    </style>
    <script type="text/javascript">
        var ws = null;

        // Class to represent chartdata
        var serie = function (_label) {
            this.label = _label;
            this.legendEntry = true;
            this.data = 1;
            this.offset = 0;
        };

        // The viewmodel for our voting
        var viewModel = {
            series: new Array(),
            votes: 0
        };

        viewModel.AddVote = function (obj) {            
            if (viewModel.series.length > 0)
                if (viewModel.series[0].label == "No Votes") { viewModel.series.pop(); }
            var inSeries = false;
            viewModel.votes++;
            for (var i = 0; i < viewModel.series.length; i++) {                
                if (viewModel.series[i].label == obj.label) {
                    viewModel.series[i].data++;
                    inSeries = true;
                }
            }
            if (inSeries === false) {
                viewModel.series.push(obj);
            }
        };

        $(function () {            
            // Setup config for Wijmo Handler
            var xHandler = "GenericText";
            var wsUri = "ws://127.0.0.1:4502/" + xHandler;

            // Create an instance of the Generic WebSocket Handler of XSockets.NET
            ws = new jXSockets.xWebSocket(wsUri, jXSockets.WEBSOCKET);

            bindSocketEvents();

            //Some Wijmo/JQuery stuff...
            $("#wijpiechart>a").wijtooltip();
            $(":input[type='radio']").wijradio();
            $(":input[type='checkbox']").wijcheckbox();
            $("#wijmo-button").button();

            /////////////////////////////////////////////
            //On Vote...
            // create new serie and send it
            /////////////////////////////////////////////
            $(".test").click(function () {
                    var msg = new $$.WebSocketMessage("OnPlayerVote");
                    msg.AddJson(new serie($(this).data("name")));
                    ws.trigger(msg.PayLoad());                              
            });

            /////////////////////////////////////////////
            //Listen for the OnPlayerVote
            // - Redraw the chart and update votes
            /////////////////////////////////////////////
            ws.bind("OnPlayerVote", function (d) {                
                viewModel.AddVote(d);
                $("#wijpiechart").wijpiechart("option", "seriesList", viewModel.series);
                $("#votes").text(viewModel.votes + " votes");
            });
            
            /////////////////////////////////////////////
            //Setup the piechart (from wijmo.com demos)
            /////////////////////////////////////////////
            $("#wijpiechart").wijpiechart({
                radius: 140,
                legend: { visible: true },
                hint: {
                    content: function () {
                        return this.data.label + " : " + $.format(this.value / this.total, "p2");
                    }
                },
                header: {
                    text: "Player Of The Game"
                },
                seriesList: [{"label":"No Votes","legendEntry":true,"data":1,"offset":0}],
                seriesStyles: [{
                    fill: "180-rgb(195,255,0)-rgb(175,229,0)", stroke: "rgb(175,229,0)", "stroke-width": "1.5"
                }, {
                    fill: "90-rgb(142,222,67)-rgb(127,199,60)", stroke: "rgb(127,199,60)", "stroke-width": "1.5"
                }, {
                    fill: "90-rgb(106,171,167)-rgb(95,153,150)", stroke: "rgb(95,153,150)", "stroke-width": "1.5"
                }, {
                    fill: "90-rgb(70,106,133)-rgb(62,95,119)", stroke: "rgb(62,95,119)", "stroke-width": "1.5"
                }, {
                    fill: "90-rgb(166,166,166)-rgb(149,149,149)", stroke: "rgb(149,149,149)", "stroke-width": "1.5"
                }]
            });

        });

        //Bind the default XSockets events
        function bindSocketEvents() {
            ws.bind("close", function (msg) {
                $('#infoDiv').text("No xSocketConnection :(");
            });

            ws.bind("FailConnect", function (msg) {
                $('#errDiv').text(msg.Message);
            });

            ws.bind("open", function (msg) {
                var votes = [];
                var m = new $$.WebSocketMessage("OnServerTestedMessage");
                m.AddJson(votes);
                ws.trigger(m.PayLoad());
            });
        }
    </script>
    <style type="text/css">
        .playerOne{
            background: white url("dougmurray.jpg") no-repeat;
            width: 100px;
            height: 150px;
            border-radius: 10px;
            border: 2px solid #DCDCDC;
            margin: 4px;       
            cursor:hand;     
        }
        .playerTwo{
            background: white url("joethornton.jpg") no-repeat;
            width: 100px;
            height: 150px;
            border-radius: 10px;
            border: 2px solid #DCDCDC;
            margin: 4px;
            float:left;
            cursor:hand;
        }
        .playerThree{
            background: white url("danboyle.jpg") no-repeat;
            width: 100px;
            height: 150px;
            border-radius: 10px;
            border: 2px solid #DCDCDC;
            margin: 4px;
            float:left;
            cursor:hand;
        }
    </style>
</head>
<body>
    <h3 class="ui-widget-header ui-corner-all" style="text-align: center; width: 320px;
        padding-top: 1em; padding-bottom: 1em;">
        San Jose Sharks vs Calgary Flames</h3>
    <div style="width: 320px;">
        <table>
            <tr>
            <td class="playerOne test" data-name="Doug Murray" id="3"></td>
            <td class="playerTwo test" data-name="Joe Thornton" id="4"></td>
            <td class="playerThree test" data-name="Dan Boyle" id="5"></td>
            </tr>
        </table>                
        <div>            
            <div id="wijpiechart" class="ui-widget ui-widget-content ui-corner-all">
            </div>
            <h3 id="votes" class="ui-widget-header ui-corner-all" style="padding: 1em; text-align: center;">
                0 Votes
            </h3>
        </div>
        <div>
            Built on @XSockets technology. A websocketserver built on .NET with plugin architecture.<br />
            Read moore at <a href="http://xsockets.net" target="_blank">http://xsockets.net</a>
            for API, Contact, Videos/Demos etc.
        </div>
    </div>
</body>
</html>
